<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- <form action="" method="post" enctype="multipart/form-data" id="myform">
        <div>Text field title: <input type="text" name="title" /></div>
        <div>File: <input type="file" name="thumb" /></div>
        <input type="submit" name="submit" value="Upload" />
    </form> -->

    <form action="" method="post" enctype="multipart/form-data" id="myform2">
        <div>Text field title: <input type="text" name="title" /></div>
        <div>File: <input type="file" id="file" name="thumb" /></div>
        <input type="submit" name="submit" value="Upload" id="ss" />
    </form>

    <div id="output"></div>

    <script src="/jquery-2.0.2.min.js"></script>
    <script src="/axios.min.js"></script>
    <script src="/jquery.form.js"></script>
    <script>
        $('#myform').submit(function () {
            var options = {
                data: {},
                type: "post",
                beforeSubmit: function () { },
                success: function (data) {
                    console.log(data);
                },
                dataType: "json",
                clearForm: false,
                resetForm: false,
                timeout: 5000
            };
            $(this).ajaxSubmit(options);

            return false;
        });

        async function submit() {
            return new Promise((resolve, reject) => {
                $.post('', $('#myform2').serialize(), function (data) {
                    resolve(data);
                }, 'json');
            });
        }

        function upload_file() {
            if (!$("#file")[0].files[0]) {
                return;
            }
            var file = $("#file")[0].files[0];

            var form = new FormData();
            form.append("thumb", file);
            form.append("data", Math.random());
            //Ajax提交
            $.ajax({
                url: "/upload",
                type: "POST",
                data: form,
                async: true,
                processData: false,
                contentType: false,
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                },
                error: function () {
                    alert('上传失败');
                }
            });
        }

        async function upload_one_piece(file, i, shardSize, shardCount) {
            return new Promise((resolve, reject) => {
                var start = i * shardSize;
                var end = Math.min(file.size, start + shardSize);

                var form = new FormData();
                form.append("data", file.slice(start, end));
                form.append("name", file.name);
                form.append("total", shardCount);
                form.append("index", i + 1);
                form.append("fileSize", file.size);
                //Ajax提交
                $.ajax({
                    url: "/upload2",
                    type: "POST",
                    data: form,
                    async: true,
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    success: function (data) {
                        if (data.status === true) {
                            resolve(data.url);
                        } else {
                            resolve(false);
                        }
                    },
                    error: function () {
                        resolve(false);
                    }
                });
            });

        }

        async function upload_file2() {
            var file = $("#file")[0].files[0];
            if (!file) {
                return false;
            }

            var shardSize = 2 * 1024 * 1024;
            var shardCount = Math.ceil(file.size / shardSize);

            for (let i = 0; i < shardCount; i++) {
                let result = await upload_one_piece(file, i, shardSize, shardCount);
                console.log(result);
                if (result === false) {
                    alert('上传失败');
                    break;
                }
                $("#output").text((i + 1) + " / " + shardCount + " [" + Math.round((i + 1) / shardCount * 100) + "%]");

            }

            return true;
        }


        $('#ss').click(function () {

            (async function () {
                console.log(await submit());
                await upload_file2();
            })();

            return false;
        });
    </script>
</body>

</html>